不同裝置視覺差異:媒體查詢 media queries
The @media rule is used in media queries to apply different styles for different media types/devices.
網頁可以在不同的裝置上呈現,但不同的裝置他的尺寸、大小都不同,網頁該如何呈現 ? 我們是否可以針對不同的裝置,設定不同的外觀與顯示方式 ?
viewport(視口) 裝置的螢幕尺寸,關係到解析度。我們可以利用阿莫斯大大螢幕解析度查詢,裡面另有字級表與網頁字數表,不同的解析度/移動/晃動,哪個設計對使用者相對較順眼、較容易看清楚。
note:9px 以下 chrome 瀏覽器就不會顯示正確像素。
媒體查詢起手式
@media screen and (條件) and (條件)
如果要增加條件,使用 and ()
note:ipad 的解析度:1024 * 768,所以小於 768 就當作手機
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.amos{
width: 100%;
height: 300px;
}
.amos1{
background: #faa;
}
.amos2{
background: #aaf;
}
@media screen and (min-width: 768px){
.amos{
width: 50%;
float: left;
}
}
</style>
</head>
<body>
<div class='amos amos1'>amos1</div>
<div class='amos amos2'>amos2</div>
</body>
</html>
viewport 是設定裝置的縮放模式。
content="width=device-width 視窗的內容的寬度等於裝置的寬度,事實上手機上會以裝置的解析度呈現網頁。舉例來說:裝置的解析度是 2 倍,裡面可以呈現的像素量(寬度) = 640顆 ,或者說他可以呈現的是 640個點,當我現在是 2 倍解析度,也就是我要呈現 320 個點的寬度,但是用 640 個點去呈現他,這樣每一個點就更細緻。原本一顆點我現在用兩顆去模擬他,點數看起來更小,畫質也就更細。這就是縮放比例的概念。
initial-scale=1.0" 是修正 ios safari 早期的 bug。
這一句不加,會出問題!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在手機上不呈現、在桌機/平板要呈現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.amos{
width: 100%;
height: 300px;
display: none;
}
.amos1{
background: #faa;
}
.amos2{
background: #aaf;
}
@media screen and (min-width: 768px){
.amos{
background: red;
display: block;
}
}
</style>
</head>
<body>
<div class='amos amos1'>amos1</div>
<div class='amos amos2'>amos2</div>
</body>
</html>
一百種裝置,一百種世界
裝置尺寸百百種,到底要如何設定網頁,讓他可以一體通用所有裝置 ? 區塊的寬度該怎麼設,才不會跑版 ?
解法、將寬度設成百分比
設計時要以手機為優先,還是桌機為優先 ?
盡量以手機為優先,但仍會依照專案有不同優先順序。
結論
: 都可以用媒體查詢進行上述處理。
實作
wrap 是裝置所有資料的父層,我們可能做滿版,也可能做固定寬。
滿版要留意,超級大螢幕狀況。對於這些超寬螢幕而言,做到滿版可能不易閱讀。所以我們通常會對 wrap 設定寬度多少,最大寬度多少。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 100%;
max-width: 1400px;
}
</style>
</head>
<body>
<div class='wrap'>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
盡量希望尺寸可以被 2, 3, 4, 5, 6 整除。因為這些會是比較常見的欄位數量。
mac 筆電大概 1440px,但要扣掉旁邊卷軸寬度。所以抓 1400。正常來說,盡量希望尺寸可以被 2, 3, 4, 5, 6 整除。因為這些會是比較常見的欄位數量。
.wrap {
width: 100%;
max-width: 1400px;
}
底下 item 我希望在手機上寬度是 100% 或者我不設定寬度,利用 margin 將它與上下左右設定一定距離。
.item {
margin: 0 12px 20px; /*上方 左右 下方 */
}
加上一點點 padding 將它撐開、加上 color 讓內容物顏色更加明顯。
.item {
margin: 0 12px 20px;
background: rosybrown;
padding: 12px;
}
<div class='wrap'>
<div class="item">
<h3>title</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
</div>
<div class="item">
<h3>title</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
</div>
<div class="item">
<h3>title</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
</div>
</div>
基本上,上面會是手機的外觀。
現在處理桌機的部分,先使用媒體查詢。我們先從 ipad 製作,所以設定 min-width: 768px,因為要做到橫排,所以設定 wrap 是 display flex。所以在平板以上,就會用 flex 的屬性針對內容物做設定,但是到手機的時候就會沒有作用。
@media screen and (min-width: 768px) {
.wrap {
display: flex;
}
}
刪減假文 => 跑版。
可以針對每個 item 計算寬度,或直接給寬度。
最後代碼長相
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.wrap {
width: 100%;
max-width: 1400px;
margin: auto;
}
.item {
margin: 0 12px 20px;
background: rosybrown;
padding: 12px;
}
@media screen and (min-width: 768px) {
.wrap {
display: flex;
}
.item {
width: 500px;
}
}
</style>
</head>
<body>
<div class='wrap'>
<div class="item">
<h3>title</h3>
<p>Lorem ipsum dolor sit, amet consecte Laborum?</p>
</div>
<div class="item">
<h3>title</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
</div>
<div class="item">
<h3>title</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
</div>
</div>
</body>
</html>